<template>
	<div class="zs-table-page-container">
		<detail-search :queryParams="queryParams" @queryList="searchFn"></detail-search>
		<div class="zs-card zs-table-page-content" :class="{ 'zs-table-first-row-special': currentPage == 1 }">
			<hsPageTable :loading="tableData.loading" :total="tableData.total" :tableData="tableData.data" :cloumns="tableData.cloumns" @pageChange="pageChange" :isHaveIndex="false" :cell-class-name="getCellClassName" :headerCellClass="getCellClassName" @sortChange="tableSortChange">
				<template #bottomTip>
					<div class="zs-layout-flex-row zs-layout-justify-between zs-space-top-sm zs-text-gray-dark">
						<span class="zs-text-sm">{{ tableTips }}</span>
						<span class="zs-text-sm">数据更新：截止{{ cutoffDate }}</span>
					</div>
				</template>
			</hsPageTable>
		</div>
	</div>
</template>

<script setup lang="jsx">
	import detailSearch from './search/detailSearch.vue';
	import { toThousands } from '@/utils/number-util';
	import detailPagesApi from '@/api/Manage/Business/detailPages';
	import { reactive, ref } from 'vue';
	import { useRouter, useRoute } from 'vue-router';
	import { useStore } from 'vuex';
	let store = useStore();
	let router = useRouter();
	let route = useRoute();
	const curPageSize = ref(store.state.uiPageSizeDefault);
	const currentPage = ref(1);
	const cutoffDate = ref(getYesterday());
	// 查询条件
	let queryParams = reactive({
		projectCode: route.query.projectCode,
		type: 1,
		sourceType: 2,
		format: '',
		startMonth: route.query.statDate || '',
		endMonth: route.query.endDate || '',
		chargetypeParentIdList: [],
		chargetypeIdList: [],
		contractsStatus: [],
		bizMode: [],
		buildingName: '',
		floorsName: '',
		wtBrandName: [],
		contractsCode: '',
		isSingle: 0,
		isLitigation: 0,
		relationCustomer: 0,
	});

	// 表格数据
	let tableData = reactive({
		loading: false,
		data: [],
		total: 0,
		cloumns: [
			{ prop: 'index', label: '序号', fixed: true, width: '80', type: 'customMethods', methods: (a, empty, { $index }) => (currentPage.value == 1 ? ($index == 0 ? '合计' : $index + curPageSize.value * (currentPage.value - 1)) : $index + 1 + curPageSize.value * (currentPage.value - 1)) },
			{ prop: 'financePeriod', label: '权责月份', fixed: true, width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'financePeriod') },
			{ prop: 'customerName', label: '商户名称', fixed: true, align: 'left', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'customerName') },
			{
				prop: 'wtBrandName',
				label: '品牌名称',
				fixed: true,
				width: '115',
				align: 'left',
				type: 'html',
				render: ({ row }) => {
					return (
						<span class="zs-link cursor-pointer" onClick={() => jumpDetailPage(row)}>
							{row.wtBrandName}
						</span>
					);
				},
			},
			{ prop: 'rentArea', label: '租赁面积', fixed: true, align: 'right', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'rentArea') },
			// { prop: 'invNTRecAmtL', label: '账单金额', align: 'right', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invNTRecAmtL') },
			{ prop: 'invRecAmtL', label: '应收金额', fixed: true, sortable: 'custom', align: 'right', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invRecAmtL') },
			{ prop: 'invIncomeAmtL', label: '实收金额', fixed: true, sortable: 'custom', align: 'right', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'invIncomeAmtL') },
			{ prop: 'debtAmt', label: '欠款金额', fixed: true, sortable: 'custom', align: 'right', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'debtAmt') },
			{ prop: 'collectionRate', label: '收缴率', fixed: true, align: 'right', width: '130', type: 'customMethods', sortable: 'custom', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'collectionRate') },
			{ prop: 'contractsStatus', label: '合同状态', width: '100', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'contractsStatus') },
			{ prop: 'conStartDate', label: '合同开始', width: '110', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conStartDate') },
			{ prop: 'conEndDate', label: '合同结束', width: '110', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conEndDate') },
			{ prop: 'conStopDate', label: '合同终止日', width: '110', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conStopDate') },
			{ prop: 'contractsCode', label: '合同编号', align: 'center', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'contractsCode') },
			{ prop: 'rentTypeDesc', label: '租金架构', align: 'left', minWidth: '200', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'rentTypeDesc') },
			{ prop: 'payTypeName', label: '押付比例', align: 'left', minWidth: '90', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'payTypeName') },
			// { prop: 'customerType', label: '商户类型', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'customerType') },
			{ prop: 'relationCustomer', label: '是否关联', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'relationCustomer') },
			{ prop: 'isLitigation', label: '是否诉讼', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'isLitigation') },
			{ prop: 'isSingle', label: '是否单列', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'isSingle') },
			{ prop: 'conShopCode', label: '单元编号', align: 'left', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'conShopCode') },
			{ prop: 'floorsName', label: '楼层', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'floorsName') },
			{ prop: 'buildingName', label: '楼栋', minWidth: '100', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'buildingName') },
			{ prop: 'bizMode', label: '资产类型', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'bizMode') },
			{ prop: 'floorManager', label: '楼层长', width: '130', type: 'customMethods', methods: (a, empty, { row, $index }) => rowMethods(row, $index, empty, 'floorManager') },
		],
	});

	function rowMethods(row, index, empty, key) {
		if (row[key]) {
			if (['rentArea', 'invRecAmtL', 'invIncomeAmtL', 'debtAmt', 'invrecamtl'].includes(key)) {
				return row[key] ? toThousands(Number(row[key]).toFixed(2)) : empty;
			} else if (key == 'collectionRate') {
				return row[key] ? row[key] + '%' : empty;
			} else {
				return row[key] || empty;
			}
		} else {
			if (index == 0) return '';
			return empty;
		}
	}

	// 分页变化
	function pageChange(page) {
		currentPage.value = page.current;
		curPageSize.value = page.pageSize;
		queryList();
	}

	async function queryList() {
		tableData.loading = true;
		const res = await detailPagesApi.collectionRateListApi({ ...queryParams, pageNum: currentPage.value, pageSize: curPageSize.value });
		let resData = res.data;

		if (resData.errorCode == 200 && resData.data.contractsList && resData.data.contractsList.length > 0) {
			if (currentPage.value == 1) {
				let sumObj = {
					debtAmt: resData.data.debtAmtTotal,
					invIncomeAmtL: resData.data.invIncomeAmtLTotal,
					invRecAmtL: resData.data.invRecAmtLTotal,
					collectionRate: resData.data.collectionRateTotal,
				};
				resData.data.contractsList.unshift(sumObj);
			}
			tableData.data = resData.data.contractsList;
			tableData.total = resData.totalCount;
		} else {
			tableData.data = [];
			tableData.total = 0;
		}
		tableData.loading = false;
	}

	const getCellClassName = ({ columnIndex }) => {
		if ([4, 8, 15, 18, 20, 21].includes(columnIndex)) {
			return 'zs-table-cell-border-right';
		}
	};

	//提示文字
	const tableTipsList = ['账单口径不包含：关联、单列、诉讼中的单位', '权责口径不包含：关联、单列、诉讼中的单位', '考核口径不包含：关联、单列、诉讼中的单位'];
	const tableTips = ref(tableTipsList[0]);
	const searchFn = data => {
		tableTips.value = tableTipsList[data.sourceType];
		queryParams = data;
		queryList();
	};

	//排序
	async function tableSortChange(data) {
		queryParams.orderField = data.order ? data.prop : '';
		queryParams.sort = data.order == 'ascending' ? 'asc' : data.order == 'descending' ? 'desc' : '';
		queryList();
	}

	function getYesterday() {
		const today = new Date();
		today.setDate(today.getDate() - 1);
		return today.toLocaleDateString('en-CA'); // 'en-CA' 返回 yyyy-mm-dd 格式
	}

	function jumpDetailPage(row) {
		localStorage.setItem('collectionRateSearchParams', JSON.stringify(queryParams));
		router.push({
			path: '/page/routeController/index',
			query: {
				rid: 'Property_DashBoard_CollectionRate_Bill',
				rTitle: '收缴率费项明细',
				projectCode: row.projectCode,
				wtBrandName:  btoa(encodeURIComponent(row.wtBrandName)),
				sourceType: queryParams.sourceType,
				source: 'collection',
			},
		});
	}
</script>
